<template>
	<div class="container">
		<div class="emoji-title">小黄脸表情包</div>
		<div class="all-emoji">
			<div class="emoji-item" v-for="(item, index) in 203" :key="index" @click="handleEmojiItem(item)">
				<img :src="`./gif/${item}.gif`" />
			</div>
		</div>
	</div>
</template>
<script setup lang="ts">
const emits = defineEmits(['selectEmoji'])
const handleEmojiItem = (item: number) => {
	emits('selectEmoji', item)
}
</script>

<style scoped lang="scss">
.container {
	width: 100%;
	height: 350px;
	padding: 5px 20px 15px;
	overflow: auto;
	background-color: var(--message-emoji-bg-color);

	&::-webkit-scrollbar {
		display: none;
	}
}
.emoji-title {
	font-size: 12px;
	margin: 10px 0 5px;
}
.all-emoji {
	width: 100%;
	display: flex;
	flex-wrap: wrap;

	.emoji-item {
		width: 30px;
		height: 30px;
		margin: 5px 10px;
		cursor: pointer;

		img {
			width: 100%;
			height: 100%;
		}
	}
}
</style>
